<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link type="text/css" href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script language="JavaScript">
        $(function () {
            get_areas_data();
            get_cinemas_data();
            distict_hover();
        });

        //ajax请求接口并显示连接栏地址数据
        function get_areas_data() {
            var url = "http://127.0.0.1:9000/api/v1/home/";
            $.get(url,function (result){
                if(result.status === 200){
                    area = result.data.area;
                    show_areas(area);
                }
            })
        }
        
        //ajax请求接口获取影院信息
        function get_cinemas_data() {
            var url = "http://127.0.0.1:9000/api/v1/cinema/?city=深圳";
            $.get(url,function (result) {
                districts = result.data.districts;
                cinemas = result.data.cinemas;
                show_cinemas(districts,cinemas)
            })
        }

        //显示影院数据
        function show_cinemas(districts,cinemas) {

            //显示distrits
            $('.show_districts')
                .append(
                    $('<div>').addClass("pull-left text-center").css({width:'140px',height:'150px',background: 'pink'})
                        .append(
                            $('<h5>').text("选择区域").css({marginTop:'25px'})
                        )
                        .append(
                            $('<h5>').text("搜索").css({marginTop:'70px'})
                        )
                )
                .append(
                    $('<div>').addClass("pull-left").css({height:'150px',paddingLeft:'120px',paddingRight:'120px',background:'peachpuff'})
                        .append(
                            $('<div>')
                                .append(
                                    $('<ul>').addClass("show_districts_detail list-inline")
                                        .append(
                                            $('<li>')
                                                .append(
                                                    $('<h4>').text("全部地区").css({background:'red',padding:'5px',color:'white'})
                                                )
                                        )
                                )
                        )
                        .append(
                            $('<div>').addClass("form-group navbar-form navbar-left ").css({marginTop:'45px'})
                                .append(
                                    $('<input>').addClass("form-control").attr("placeholder","Password")
                                )
                                .append(
                                    $('<button>').addClass("btn btn-default pull-left").attr('type','button')
                                        .append(
                                            $('<span>').addClass("glyphicon glyphicon-search")
                                        )
                                )
                        )
                );
            
            

            //显示distrits里面的字段
            for (let district of districts){
                $('.show_districts_detail')
                    .append(
                        $('<li>').addClass("district_hover")
                            .append(
                                $('<a>').text(district).css({color: 'black'}).addClass("district_hover")
                            )
                    )
            }

            //显示cinemas
            for (let cinema of cinemas){
                $('.show_cinemas')
                    .append(
                        $('<tr>')
                            .append(
                                $('<td>').addClass("clearfix")
                                    .append(
                                        $('<div>').addClass("pull-left")
                                            .append(
                                                $('<a>')
                                                    .append(
                                                        $('<img>')
                                                            .attr('src',"https://gw.alicdn.com/tfscom/i4/TB1XihcjnqWBKNjSZFAXXanSpXa_.jpg")
                                                            .css({height: '150px'})
                                                    )
                                            )
                                    )
                                    .append(
                                        $('<div>').addClass("pull-left").css({marginLeft:'20px',width: '320px'})
                                            .append(
                                                $('<h4>')
                                                    .append(
                                                        $('<a>').text(cinema.name)
                                                    )
                                            )
                                            .append(
                                                $('<p>').text('地址:' + cinema.address)
                                            )
                                            .append(
                                                $('<p>').text('电话:' + cinema.phone)
                                            )
                                            .append(
                                                $('<p>')
                                                    .append(
                                                        $('<a>').text('影院服务')
                                                    )
                                                    .append(
                                                        $('<a>').text('交通信息')
                                                    )
                                            )
                                    )
                                    .append(
                                        $('<div>').addClass("pull-right")
                                            .append(
                                                $('<h4>').text('评分:').append(
                                                    $('<span>').text(cinema.score)
                                                )
                                            )
                                            .append(
                                                $('<button>').addClass("btn btn-danger").attr('type','button').css({marginTop:'70px'}).text('选座 ')
                                            )
                                    )
                            )
                    )
            }
        }

        //hover事件
        function distict_hover() {
            $('.district_hover').hover(function () {
                $(this).css({
                    color:'white',
                    padding: '5px',
                    background:'red'
                })
            },function () {
                $(this).css({
                    color:'black'
                })
            })
        }

        //在链接栏上显示地址
        function show_areas(area) {
            hot_areas = area.hot_areas;
            normal_areas = area.normal_areas;
            $('#show_areas')
                .append(
                    $('<a>').addClass("btn dropdown-toggle").attr('role',"button").attr('data-toggle',"dropdown")
                        .append(
                            $('<span>').text("北京").addClass('has_choice_hot_area')
                        )
                        .append(
                            $('<span>').addClass("caret")
                        )
                )
                .append(
                    $('<ul>').addClass("dropdown-menu list-unstyled show_areas").css({width:'800px',height:' 400px',overflow:'hidden'})
                        .append(
                            $('<li>').addClass('hot_areas clearfix')
                                .append(
                                    $('<span>').text("热门城市").addClass("bg-primary")
                                )
                        )
                );

            for(let hot_area of hot_areas){
                $('.hot_areas')
                    .append(
                        $('<span>')
                            .append(
                                $('<a>').text(hot_area.short_name).css({marginLeft:'10px'}).addClass("hot_choice_area")
                            )
                    )
            };

            for (let normal_area of normal_areas){
                $('.show_areas').append(
                    $('<li>')
                        .append(
                            $('<span>').text(normal_area.first).css({color : 'white',background: 'red'})
                        )
                );
                normal_list = normal_area.normal_list;
                for (let normal of normal_list){
                    $(".show_areas:last-child")
                        .append(
                            $('<span>')
                                .append(
                                    $('<a>').text(normal.short_name).css({marginLeft:'10px'})
                                )
                        )
                }
            };
        }

    </script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default " style="height:20px;">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">淘票票</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">电影 <span class="sr-only"></span></a></li>
                <li><a href="#">音乐</a></li>
                <li class="dropdown">
                    <a href="#" class="btn dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="glyphicon glyphicon-align-justify"></span></a>
                    <ul class="dropdown-menu ">
                        <li class="bg-primary" ><a href="#" >同城</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="bg-success"><a href="#">小组</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="bg-info"><a href="#">聊天</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="bg-warning"><a href="#">读书</a></li>

                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户详情<span class="caret"></span></a>
                    <ul class="dropdown-menu bg-danger">
                        <li><a href="#">用户名</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">我的收藏</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注册Vip会员</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->
</nav>
<!--链接栏-->
<div class="container-fluid">
    <div class="col-lg-12">
        <ul class="nav  nav-justified" >
            <li role="presentation" class=" dropdown " id="show_areas"></li>
            <li role="presentation" ><a href="index.html" style="font-size: 30px">首页</a></li>
            <li role="presentation"><a href="movies_list.html" style="font-size: 30px">影片</a></li>
            <li role="presentation"><a href="cinemas_list.html" style="font-size: 30px">影院</a></li>
        </ul>
    </div>
</div>

<!--影院显示-->
<div class="container">
    <div class="col-lg-8">
        <!--地址相关-->
        <div class="clearfix show_districts">
            <!--<div class="pull-left">标题</div>-->
            <!--<div class="pull-left">-->
                <!--<div>全部区域</div>-->
                <!--<div>搜索</div>-->
            <!--</div>-->
        </div>
        <!--影院相关-->
        <div>
            <table class="table show_cinemas">
                <!--<tr >-->
                    <!--<td class="clearfix">-->
                        <!--<div class="pull-left"><a><img src="https://gw.alicdn.com/tfscom/i4/TB1XihcjnqWBKNjSZFAXXanSpXa_.jpg" style="height: 150px"></a></div>-->
                        <!--<div class="pull-left" style="margin-left: 20px">-->
                            <!--<h3><a>xx电影院</a></h3>-->
                            <!--<p>地址:</p>-->
                            <!--<p>电话:</p>-->
                            <!--<p>更多:<a>影院服务</a><a>交通信息</a></p>-->
                        <!--</div>-->
                        <!--<div class="pull-right">-->
                            <!--<h4>评分()</h4>-->
                            <!--<button type="button" class="btn btn-danger" style="margin-top: 70px">选座</button>-->
                            <!--&lt;!&ndash;<div class="bg-primary" style="margin-top: 70px">选座</div>&ndash;&gt;-->
                        <!--</div>-->
                    <!--</td>-->
                <!--</tr>-->
            </table>
        </div>
    </div>


    <!--其他-->
    <div class="col-lg-4 bg-danger bg-waring"></div>

    <!--分页按钮组-->
    <div class="col-lg-8 col-lg-offset-2">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>